<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<myheader class="my-header" :leftType="2" :noLeft="false" :showTitle="store.storeName" :textLeft="textLeft"></myheader>
		<!-- #endif -->
		<view class="content">
			<view class="dingyue">
				<view class="dingyue-box" v-for="(item, index) in dataList" :key="index">
					<view class="dingyue-box-top">
						<image :src="item.servicePic" class="dingyue-box-top-left" mode=""></image>
						<view class="dingyue-box-top-right">
							<view class="dingyue-box-top-right-1">{{ item.serviceName }}</view>
							<view class="dingyue-box-top-right-2">订阅时间：{{ item.createTime }}</view>
							<view class="dingyue-box-top-right-3">
								<view class="dingyue-box-top-right-3-1">0.00/免费</view>
								<view class="dingyue-box-top-right-3-2" @tap="cancelSub(item)">取消订阅</view>
							</view>
						</view>
					</view>
					<view class="dingyue-box-bottom">
						<view class="dingyue-box-bottom-1">
							<image :src="item.shopLogo" class="dingyue-box-bottom-1-img" mode=""></image>
							<view class="dingyue-box-bottom-1-txt">{{ item.shopName }}</view>
						</view>
						<!-- <image src="../../static/xiangyou.svg" class="dingyue-box-bottom-2" mode="" @tap="goShop"></image> -->
					</view>
				</view>
			</view>
			<view class="no-data" v-if="dataList.length == 0">搜索无结果，请重试</view>
		</view>
		<view class="tabbar-wrap">
				<block >
					<view @click="onFirst" class="tab-item">
						<image class="icon" :src="store.storeLogo"></image>
					</view>
				</block>
				<block v-for="(item, index) in list" :key="index">
					<view @click="onTab(item)" v-show="active !== index" class="tab-item">
						<image class="icon" :class="{ 'mid-button': item.midButton }" :src="item.iconPath"></image>
						<text  class="txt" :style="{ color: color }">{{ item.text }}</text>
					</view>
					<view @click="onTab(item)" v-show="active === index" class="tab-item">
						<image class="icon" :class="{ 'mid-button': item.midButton }" :src="item.selectedIconPath"></image>
						<text class="txt" :style="{ color: selectedColor }">{{ item.text }}</text>
					</view>
				</block>
			</view>
	</view>
</template>

<script>
import {
	mapGetters
} from "vuex";
	import myheader from '../../components/header/index.vue';
	export default {
		components: {
			myheader
		},
		computed: {
			...mapGetters(["store","nickname"]),
		},
		data() {
			return {
				textLeft: true,
				active: 1,
				dataList: [],
				searchData: {
					page:1,
					pageSize: 10
				},
				search: '',
				headerHight: 80,
				isLoaded:1,
				
				list: [
					{
						"pagePath": "/pages/shop/service",
						"text": "服务",
						"iconPath": "/static/tabBar/second.svg", // 默认图片
						"selectedIconPath": "/static/tabBar/secondSelect.svg" // 选中图片
					},
					{
						"pagePath": "/pages/shop/sub",
						"text": "已订",
						"iconPath": "/static/tabBar/third.svg", // 默认图片
						"selectedIconPath": "/static/tabBar/thirdSelect.svg" // 选中图片
					},
					{
						"pagePath": "/pages/shop/about",
						"text": "关于",
						"iconPath": "/static/tabBar/fourth.svg", // 默认图片
						"selectedIconPath": "/static/tabBar/fourthSelect.svg" // 选中图片
					}
				],
				
			}
		},
		onShow() {
			this.isLoaded = 1
			this.dataList = []
			this.searchData.page = 1
			this.getDataList();
		},
		beforeMount() {
			let selectQuery = uni.createSelectorQuery().in(this);
			selectQuery.selectAll('.my-header').boundingClientRect(rect => {
				this.headerHight = rect[0].height;
			}).exec()
			this.$forceUpdate();
		},
		onReachBottom() {
			if (this.isLoaded == 1) {
				this.searchData.page++
				this.getDataList('add')
			}
		},
		methods: {
			cancelSub(service) {
				let that = this
				uni.showModal({
					content: '确定要取消订阅吗',
					confirmColor: "#E02828",
					success: function (res) {
						if (res.confirm) {
							uni.showLoading({
								title: '取消中',
								mask: true
							})
							that.trueCancel(service)
						} else if (res.cancel) {
							return false;
						}
					},
				});
				
			},
			trueCancel(service) {
				this.$H.delete("portal/sub/cancelSub?subId=" + service.serviceId).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						uni.showToast({
							title: "取消成功",
							icon: "none"
						})
						this.gethasServiceIdList();
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			goShop() {
			},
			getDataList(flag) {
				if (!this.nickname) {
					uni.redirectTo({
						url: '/pages/login/login'
					})
				}
				uni.showLoading({
					title: '正在加载...',
					mask: true
				}); // 显示加载提示
				let postData = {
					"page": this.searchData.page,
					"pageSize": this.searchData.pageSize,
					storeId: this.store.storeId
				}
				this.$H.post("portal/sub/searchsubsByStore", postData).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						let data = res.data.data;
						if (!data || data.length < this.searchData.pageSize) {
							this.isLoaded = 2
						}
						if (data != null) {
							if(flag) {
								
								for (let i = 0; i < data.length; i++) {
									this.dataList.push({
										"id": data[i].id,
										"shopLogo": data[i].logoUrl,
										"shopName": data[i].storeName,
										"servicePic": data[i].mainPic,
										"serviceName": data[i].serviceName,
										"serviceId": data[i].serviceId,
										"serviceTag": data[i].menus.split(","),
										"createTime": data[i].createTime
									});
								}
							} else {
								for (let i = 0; i < data.length; i++) {
									this.dataList.push({
										"id": data[i].id,
										"shopLogo": data[i].logoUrl,
										"shopName": data[i].storeName,
										"servicePic": data[i].mainPic,
										"serviceName": data[i].serviceName,
										"serviceId": data[i].serviceId,
										"serviceTag": data[i].menus.split(","),
										"createTime": data[i].createTime
									});
								}
							}
						}
						this.$forceUpdate();
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				});
			},
			onFirst() {
				uni.reLaunch({
					url: '/pages/shop/shop?shopId=' + this.store.storeId
				})
			},
			onTab(item) {
				uni.navigateTo({
					url: item.pagePath
				})
			},
			getMsg(flag) {
				this.$H.post("portal/feedback/list", this.params).then((res) => {
					uni.hideLoading();
					if (res.code == 0) {
						if (res.data.cursor) {
							this.params.cursor = res.data.cursor
						}
						if (flag) {
							let arr = res.data.data? res.data.data: []
							this.list = this.list.concat(arr)
						} else {
							this.list = res.data.data? res.data.data: []
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.tabbar-wrap {
	    position: fixed;
	    bottom: 0;
	    width: 100%;
	    z-index: 90;
	    background-color: #fff;
	    padding: 20px 0px 20px 0px;
		padding-bottom: calc(constant(safe-area-inset-bottom));
		padding-bottom: calc(env(safe-area-inset-bottom));
	    display: flex;
	    align-items: center;
		border-top: 1px solid #f4f6f7;
		.tab-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			flex: 1;
			height: 100%;
			border-radius: 8px;
			position: relative;
	
			.icon {
				width: 24px;
				height: 24px;
				border-radius: 50%;
			}
	
			.txt {
				margin-top: 3px;
				font-size: 12px;
			}
	
			.number {
				background-color: #FA3534;
				color: #fff;
				border-radius: 50%;
				position: absolute;
				right: 25rpx;
				top: 5px;
				display: inline-block;
				width: 20px;
				height: 20px;
				font-size: 10px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
	
			.mid-button {
				width: 43px;
				height: 43px;
			}
		}
	
		.tab-item[hidden] {
			display: none !important;
		}
	}
	.no-data {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		justify-content: center;
		height: 96rpx;
		line-height: 96rpx;
		width:100%;
		color: #cbd1d8;
	}
.dingyue {
	width: calc(100% - 40px);
	padding: 10px 20px 100px;
	&-box {
		background: #fff;
		border-radius: 5px;
		padding: 10px;
		margin-bottom: 10px;
		&-bottom {
			display: flex;
			align-items: center;
			padding-top: 10px;
			&-1 {
				flex: 1;
				display: flex;
				align-items: center;
				margin-right: 10px;
				&-img {
					width: 32px;
					height: 32px;
					border-radius: 50%;
					background: #efecea;
					margin-right: 10px;
				}
				&-txt {
					color: #1ABC9C;
					font-size: 16px;
					font-weight: 700;
				}
			}
			&-2 {
				width:20px;
				height: 20px
			}
		}
		&-top {
			display: flex;
			align-items: center;
			border-bottom: 1px solid #EAECEF;
			padding-bottom: 10px;
			padding-top: 10px;
			&-left {
				width: 86px;
				height: 86px;
				border-radius: 10px;
				background: #eaecef;
				margin-right: 10px;
			}
			&-right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 86px;
				&-1 {
					font-size: 16px;
					font-weight: 700;
					color: #34495E;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				&-2 {
					font-size: 14px;
					font-weight: 400;
					color: #8292A2;
					
				}
				&-3 {
					display: flex;
					align-items: center;
					justify-content: space-between;
					&-1 {
						font-size: 16px;
						font-weight: 400;
						color: #2E4964;
					}
					&-2 {
						color: #E74C3C;
						border: 1px solid #E74C3C;
						font-size: 14px;
						font-weight: 700;
						width: 56px;
						height:22px;
						border-radius: 999px;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 2px 6px;
					}
				}
			}
		}
	}
}
.input {
	display: flex;
	position: sticky;
	left: 0;
	top:0;
	background: #fff;
	z-index:100;
	align-items: center;
	width: calc(100% - 40px);
	padding: 0 20px 10px;
	&-box {
		padding: 10px;
		border-radius: 999px;
		flex: 1;
		display: flex;
		align-items: center;
		margin-right:10px;
		border: 1px solid #CBD1D8;
		&-img {
			width: 16px;
			height:16px;
		}
		&-txt {
			flex: 1;
			margin-left: 8px;
			color: #34495E;
			font-size: 14px;
			font-weight: 500;
		}
	}
	&-search {
		font-size: 16px;
		font-weight: 700;
		color: #1ABC9C;
	}
}
</style>
